<template>
  <div>
    <!-- 上传文件 -->
    <header-tab>
      <span slot="left" @click="Go_me"><van-icon name="arrow-left" /></span>
      <span slot="title">宠物资料</span>
    </header-tab>
    <div class="touxiang">
      <van-uploader
        class="list-upload"
        :after-read="afterRead"
        accept="image/jpeg,image/png"
        :preview-image="false"
        v-model="fileList"
        multiple
        :max-count="1"
      >
        <template v-if="imgurl == null">
          <van-image
            fit="cover"
            round
            width="10rem"
            height="10rem"
            :src="require('../assets/img/logo.jpg')"
            style="background-color: #f0f0f0; border: 1px solid gray"
        /></template> </van-uploader
      ><img v-if="imgurl" class="afterImg" :src="imgurl" alt="" />
      <img
        v-show="hidden_xiangji"
        src="../assets/img/xiangji.png"
        style="width: 2rem; position: absolute; top: 13rem; left: 21.5rem"
      />
    </div>
    <van-field name="radio" label="类型">
      <template #input>
        <van-radio-group v-model="typeRadio" direction="horizontal">
          <van-radio name="cat">猫咪</van-radio>
          <van-radio name="dog">狗狗</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <!-- 宠物名 -->
    <van-field v-model="petName" label="名字" placeholder="请填写宠物名字" />
    <!-- 宠物年龄 -->
    <van-field v-model="petAge" type="number" label="年龄" placeholder="请输入阿拉伯数字" />
    <!-- 宠物性别 -->
    <van-field name="radio" label="性别">
      <template #input>
        <van-radio-group v-model="sexRadio" direction="horizontal">
          <van-radio name="female">女生</van-radio>
          <van-radio name="male">男生</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <!-- 宠物品种 -->
    <van-field v-model="petBreed" label="品种" placeholder="非必填" />
    <van-field
      v-model="describe"
      rows="2"
      autosize
      label="宠物简介"
      type="textarea"
      maxlength="50"
      placeholder="非必填"
      show-word-limit
    />
    <div style="margin: 16px">
      <van-button style="background-color: #f8e176" size="large" round @click="AddPetData">添加</van-button>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import HeaderTab from '@/components/HeaderTab.vue';
export default {
  components: { HeaderTab },
  props: ['petNumber', 'p_id', 'p_img', 'p_name', 'p_year', 'p_gender', 'p_type', 'p_content', 'p_breed'],
  data() {
    return {
      imgurl: null,
      petName: '',
      petNameERR: false,
      petAge: '',
      petAgeERR: false,
      typeRadio: 'cat',
      sexRadio: 'female',
      petBreed: '',
      describe: '',
      fileList: [],
      hidden_xiangji: true,
    };
  },
  methods: {
    afterRead(file) {
      var data = new FormData();
      data.append('file', file.file);
      let config = {
        headers: {
          //添加请求头
          'Content-Type': 'multipart/form-data',
        },
      };
      //上传图片
      this.axios.post('http://localhost:9000/upload', data, config).then(res => {
        console.log('res', res);
        res.data.status == 200;
        this.fileList.push(res.data.data);
        console.log(this.fileList[1]);
        this.imgurl = res.data.data;
        console.log(this.imgurl);
        this.hidden_xiangji = !this.hidden_xiangji;
      });
    },
    AddPetData() {
      if (!this.imgurl) {
        Toast('请添加宠物头像');
        return;
      }
      if (!this.petName) {
        Toast('请输入宠物名');
        return;
      }
      if (!this.petAge) {
        Toast('请输入宠物年龄');
        return;
      }
      if (this.$route.query.petNumber > 4) {
        this.$toast('宠物最多只能添加五个哦,您已达到上限啦');
        return;
      } else {
        let params = `pImg=${this.imgurl}&&pName=${this.petName}&&pYear=${this.petAge}&&pGender=${
          this.sexRadio == 'female' ? 0 : 1
        }&&pType=${this.typeRadio == 'cat' ? 1 : 2}&&pContent=${this.describe}&&pBreed=${
          this.petBreed
        }&&userId=${sessionStorage.getItem('UserID')}`;
        this.axios.post('/pet/addPet', params).then(res => {
          console.log('新增宠物的结果', res);
          if (res.data.code == 200) {
            this.$toast('新增成功');
            this.$router.go(-1);
          } else {
            this.$toast('新增失败');
          }
        });
      }
    },
    Go_me() {
      this.$router.go(-1);
    },
  },
  mounted() {
    console.log(this.$route.query.petNumber);
  },
};
</script>

<style>
.touxiang {
  background-color: #f8e176;
  height: 15rem;
  text-align: center;
  padding-top: 5rem;
  position: relative;
}
.afterImg {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid gray;
  background-color: #f0f0f0;
}
</style>
